/// File: app/creator-profile.tsx
import { View, Text, StyleSheet, Image, ScrollView, TouchableOpacity, Dimensions } from 'react-native';
import { useRouter } from 'expo-router';

const { width } = Dimensions.get('window');

const popularProducts = [
  { name: '簡約陶瓷杯', price: '$22', image: require('../../assets/logo.png') },
  { name: '和風香氛蠟燭', price: '$38', image: require('../../assets/logo.png') },
];

export default function CreatorProfile() {
  const router = useRouter();

  return (
    <ScrollView style={styles.container}>
      <TouchableOpacity onPress={() => router.back()} style={styles.backBtn}>
        <Text style={styles.backText}>← 返回</Text>
      </TouchableOpacity>

      <View style={styles.header}>
        <Image source={require('../../assets/logo.png')} style={styles.avatar} />
        <View style={styles.headerText}>
          <Text style={styles.name}>Kana Yuuki</Text>
          <Text style={styles.bio}>生活風格創作者 | 插畫 | 美感日常</Text>
        </View>
      </View>

      <View style={styles.statsRow}>
        <View style={styles.stat}><Text style={styles.statNumber}>2.5K</Text><Text style={styles.statLabel}>粉絲</Text></View>
        <View style={styles.stat}><Text style={styles.statNumber}>321</Text><Text style={styles.statLabel}>貼文</Text></View>
        <View style={styles.stat}><Text style={styles.statNumber}>48</Text><Text style={styles.statLabel}>商品</Text></View>
      </View>

      <TouchableOpacity onPress={() => router.push('/creators/creator-subscribe')} style={styles.subscribeBtn}>
        <Text style={styles.subscribeText}>訂閱 Kana</Text>
      </TouchableOpacity>

      <View style={styles.actionRow}>
        <TouchableOpacity onPress={() => router.push('../bookings/booking-detail')} style={styles.actionBtn}>
          <Text style={styles.actionText}>預約</Text>
        </TouchableOpacity>
        <TouchableOpacity onPress={() => router.push('../products/product_list')} style={styles.actionBtn}>
          <Text style={styles.actionText}>商品</Text>
        </TouchableOpacity>
      </View>

      <Text style={styles.sectionTitle}>人氣商品</Text>
      <ScrollView horizontal showsHorizontalScrollIndicator={false} style={styles.horizontalList}>
        {popularProducts.map((item, index) => (
          <View key={index} style={styles.productCard}>
            <Image source={item.image} style={styles.productImage} />
            <Text style={styles.cardTitle}>{item.name}</Text>
            <Text style={styles.cardSubtitle}>{item.price}</Text>
          </View>
        ))}
      </ScrollView>

      <Text style={styles.sectionTitle}>最新貼文</Text>
      <View style={styles.postGrid}>
        <View style={styles.postItem}>
          <Image source={require('../../assets/logo.png')} style={styles.postImg} />
          <Text style={styles.postCaption}>☕️ 今早在戶外享受一杯手沖咖啡，陽光超棒。</Text>
        </View>
        <View style={styles.postItem}>
          <Image source={require('../../assets/logo.png')} style={styles.postImg} />
          <Text style={styles.postCaption}>🎨 分享最近完成的插畫作品，希望你們喜歡！</Text>
        </View>
        <View style={styles.postItem}>
          <Image source={require('../../assets/logo.png')} style={styles.postImg} />
          <Text style={styles.postCaption}>📚 正在準備下週主題內容，請期待～</Text>
        </View>
        <View style={styles.postItem}>
          <Image source={require('../../assets/logo.png')} style={styles.postImg} />
          <Text style={styles.postCaption}>🌿 和朋友走了一趟城市植物園，好療癒。</Text>
        </View>
      </View>
    </ScrollView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    paddingTop: 60,
    paddingHorizontal: 20,
  },
  backBtn: {
    marginBottom: 12,
  },
  backText: {
    color: '#555',
    fontSize: 14,
  },
  header: {
    flexDirection: 'row',
    alignItems: 'center',
    marginBottom: 20,
  },
  avatar: {
    width: 80,
    height: 80,
    borderRadius: 40,
    marginRight: 16,
  },
  headerText: {
    flex: 1,
  },
  name: {
    color: '#111',
    fontSize: 20,
    fontWeight: '600',
    marginBottom: 4,
  },
  bio: {
    color: '#666',
    fontSize: 13,
  },
  statsRow: {
    flexDirection: 'row',
    justifyContent: 'space-around',
    marginBottom: 16,
  },
  stat: {
    alignItems: 'center',
  },
  statNumber: {
    color: '#111',
    fontSize: 16,
    fontWeight: '600',
  },
  statLabel: {
    color: '#888',
    fontSize: 12,
  },
  subscribeBtn: {
    backgroundColor: '#111',
    paddingVertical: 10,
    borderRadius: 8,
    alignItems: 'center',
    marginBottom: 12,
  },
  subscribeText: {
    color: '#fff',
    fontWeight: '600',
    fontSize: 14,
  },
  actionRow: {
    flexDirection: 'row',
    justifyContent: 'flex-start',
    marginBottom: 20,
    gap: 10,
  },
  actionBtn: {
    backgroundColor: '#f0f0f0',
    paddingVertical: 10,
    borderRadius: 8,
    paddingHorizontal: 30,
  },
  actionText: {
    color: '#111',
    fontWeight: '500',
    fontSize: 14,
  },
  sectionTitle: {
    fontSize: 16,
    fontWeight: '600',
    color: '#111',
    marginBottom: 12,
  },
  horizontalList: {
    marginBottom: 24,
  },
  productCard: {
    marginRight: 16,
    width: 120,
  },
  productImage: {
    width: 120,
    height: 120,
    borderRadius: 8,
    marginBottom: 6,
  },
  cardTitle: {
    color: '#111',
    fontSize: 13,
    fontWeight: '500',
  },
  cardSubtitle: {
    color: '#999',
    fontSize: 11,
  },
  postGrid: {
    flexDirection: 'column',
    gap: 20,
    alignItems: 'center'
  },
  postItem: {
    marginBottom: 10,
    alignItems: 'center'
  },
  postImg: {
    width: width * 0.85,
    height: width * 0.85,
    borderRadius: 10,
    marginBottom: 6,
    resizeMode: 'cover'
  },
  postCaption: {
    fontSize: 13,
    color: '#444',
    lineHeight: 18,
    textAlign: 'left',
    width: width * 0.85
  },
});